import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Layout, Row, Col} from 'antd';
import {Menu, Icon} from 'antd';
import {IndexLink} from 'react-router';
import {View as NavLink} from '../../NavLink';

export default class Header extends Component {
    constructor() {
        super();
        this.state = {
            current: 'index'
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    }

    render() {
        const {Header} = Layout;
        return (
            <Header className="header">
                <Row type="flex" justify="center">
                    <Col span={4}>logo</Col>
                    <Col span={16}>
                        <Menu
                            onClick={this.handleClick}
                            selectedKeys={[this.state.current]}
                            mode="horizontal"
                        >
                            <Menu.Item key="index">
                                {/*<Icon type="appstore"/>*/}
                                <IndexLink to="/">首页</IndexLink>
                            </Menu.Item>
                            <Menu.Item key="demo">
                                <NavLink to="/demo">Demo</NavLink>
                            </Menu.Item>
                            <Menu.Item key="counter-panel">
                                <NavLink to="/counter-panel">Counter</NavLink>
                            </Menu.Item>
                            <Menu.Item key="about">
                                <NavLink to="/about">About</NavLink>
                            </Menu.Item>
                        </Menu>
                    </Col>
                    <Col span={4}>登录模块</Col>
                </Row>
            </Header>
        );
    }
}

Header.propTypes = {};
			